<template>
    <div class="addrenwu">
     
        <div class="center">
          
            <div class="right">
            
                <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
                <div class="conlist" v-loading='loading'>
                    <div class="addrenwutitle">新建短信任务</div>
                    <el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">
                        <el-form-item label="任务名称:">
                            <el-input v-model="renwu.name"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态：">
                          <el-select v-model="renwu.order_status"  placeholder="商品名称">
                              <el-option label="下单提醒" value="120"></el-option>
                              <el-option label="待完善证件信息" value="150"></el-option>
                              <el-option label="证件信息不合格" value="-200"></el-option>
                              <el-option label="开卡失败" value="-460"></el-option>
                              <el-option label="已发货提醒" value="550"></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="检索条件:">
                            <div class="flex" style="background: #EAEAEA; padding: 20px; border-radius: 3px;">
                              <el-form-item label="订单来源：">
                                  <el-select v-model="renwu.order_source" multiple collapse-tags filterable clearable  placeholder="订单来源">
                                      <el-option :label="item" :value="item" v-for="(item,index) in sourcelist" :key="index"></el-option>
                                  </el-select>
                                  <el-button size="small" type="primary" @click="laiyuanshow = true">新增</el-button>
                              </el-form-item>
                              <el-form-item label="商品名称：">
                                  <el-select v-model="renwu.shop_name" multiple collapse-tags filterable clearable placeholder="商品名称" @change='shang'>
                                      <el-option :label="item.fetch_code" :value="item.id" v-for="item in shoplist" :key="item.id"></el-option>
                                  </el-select>
                                  <!-- <el-button size="mini" @click="quanxuan">全选商品</el-button> -->
                                  <!-- <el-select
                                      v-model="value2"
                                      multiple
                                      collapse-tags
                                      style="margin-left: 20px;"
                                      placeholder="请选择">
                                      <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                      </el-option>
                                    </el-select> -->
                              </el-form-item>
                              <el-form-item label="退款状态：">
                                  <el-select v-model="renwu.refund_status" clearable   placeholder="退款状态">
                                      <el-option label="正常" value="100"></el-option>
                                      <el-option label="退款中" value="200"></el-option>
                                      <el-option label="已退款" value="300"></el-option>
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="是否外呼：">
                                  <el-select v-model="renwu.outbound_status" clearable  placeholder="是否外呼">
                                      <el-option label="未拨打" value="0"></el-option>
                                      <el-option label="未拨通" value="1"></el-option>
                                      <el-option label="已拨通" value="2"></el-option>
                                  </el-select>
                              </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item label="发送时段:">
                            <div class="flex" style="background: #FFFFFF; padding: 14px 0px; border-radius: 3px;">
                                <el-radio v-model="renwu.time" label="1">符合条件立即发送</el-radio>
                                <!-- <el-radio v-model="renwu.time" label="2" style="width: auto !important; line-height: 36px;">指定时间发送</el-radio>

                                <el-time-select v-model="renwu.sendtime" :picker-options="{ start: '00:00', step: '01:00', end: '24:00'}" placeholder="选择时间">
                                </el-time-select> -->
                            </div>
                        </el-form-item>
                        <el-form-item label="短信签名:">
                            <el-radio v-model="renwu.sign" v-for="item in qianminglist" :key="item.id" :label="item.id" >{{item.name}}</el-radio>
                            <el-tooltip class="item" effect="light" content="您可联系我们提交相关资料，我们帮您申请您专属的签名" placement="top">
                            	<span class="wenhao">?</span>
                            </el-tooltip>
                            <el-button type="primary"  size="mini" style="float: right; position: relative; top: 10px;" @click="showsign = true">申请签名</el-button>

                        </el-form-item>
                        <el-form-item label="短信内容:">
                            <div class="shuru">
                                <div class="shurutop">已输入<span class="red">{{zishu}}</span>个字，共计<span class="red">{{tiaoshu}}</span>条短信。
                                <el-tooltip class="item" effect="light" content="70字记一条短信费，超出70字则以67字每条计费。" placement="top">
                                  <span style="color: #8E65B7; cursor: pointer;">计费规则</span>
                                </el-tooltip></div>
                                <el-input type="textarea" @input="jishu" :rows="2"  placeholder="请输入内容" v-model="renwu.content"></el-input>
                            </div>
                            <div style="display: flex;  padding-top: 20px;">
                              <el-checkbox v-model="renwu.is_url" @change='photochange'>添加照片上传变量(占23个字数)</el-checkbox>
                              <el-checkbox v-model="renwu.is_fahuo" @change='photochange2'>添加发货信息变量(占23个字数)</el-checkbox>
                            </div>

                        </el-form-item>
                        <el-form-item label="测试手机:">
                            <el-input v-model="renwu.mobile" placeholder="最多5个手机号，以逗号隔开"></el-input>
                            <el-button type="text" @click="duanxintest">立即发送</el-button>
                        </el-form-item>
                        <el-form-item label=" ">
                            <div class="wenxin">
                              <p>温馨提示： </p>
                              <p>1) 请留意短信内的敏感字词，例如：联通、电信、移动等可能导致短信被运营商拦截。 </p>
                              <p>2) 短信内容包含：特卖、优惠、限时等营销词语可能会被手机安全软件拦截。 </p>
                              <p>3) 发送网址请确保前后已加空格否则可能导致手机端网址无法打开。</p>
                            </div>
                        </el-form-item>
                    </el-form>
                    <div class="flexm" style="margin-left: 100px;">
                      <el-button type="danger" size="medium" @click="chuangjian">{{chuangjianw}}</el-button>
                      <span class="red" style="margin: 0 20px; font-size: 14px;">当前剩余：{{duanxintiaoshu}}条</span>
                      <router-link to="/duanxin/duanxinchongzhi">充值短信</router-link>
                    </div>

                </div>
            </div>
        </div>
        <el-dialog title="申请签名" :visible.sync="showsign" :close-on-press-escape="false" :close-on-click-modal="false" width="600px">
            <div>
                <el-form ref="form" @submit.native.prevent v-model="form" label-width="120px" class="form">
                  <el-form-item label="申请签名名称：">
                      <el-input v-model="signname"></el-input>
                  </el-form-item>
                  <el-form-item label="称呼：">
                      <el-input v-model="signxingming"></el-input>
                  </el-form-item>
                  <el-form-item label="手机号：">
                      <el-input v-model="signmobile"></el-input>
                  </el-form-item>
                  <el-form-item label="">
                      注：我们将会在48小时内联系您，准备好相关资料后申请
                  </el-form-item>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="showsign = false">取 消</el-button>
              <el-button type="primary" @click="addsign">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="添加来源" :visible.sync="laiyuanshow" :close-on-press-escape="false" :close-on-click-modal="false" width="600px">
            <div>
                <el-form ref="form" @submit.native.prevent v-model="form"  class="form">
                  <el-form-item >
                      <el-input v-model="tuiguanglaiyuan.source" style="width: 250px;" placeholder="来源分类：例：“PDD”或“新媒体”"></el-input>
                      -
                      <el-input v-model="tuiguanglaiyuan.name" style="width: 250px;" placeholder="来源名称：例：”百度、搜狗”等"></el-input>

                  </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="laiyuanshow = false">取 消</el-button>
              <el-button type="primary" @click="tianjia">确 定</el-button>
            </span>
        </el-dialog>
        <foot></foot>
    </div>

</template>

<script>
    import axios from 'axios'
    import top from '@/components/top.vue'
    import left from '@/components/left.vue'
    import foot from '@/components/foot.vue'
    import duanxinci from '../../../public/duanxin'
    import moment from "moment";
    export default {
        components: {
            "left": left,
            "top": top,
            "foot": foot,
        },
        name: "addrenwu",
        data() {
            return {
              laiyuanshow:false,
                signname:"",
                signxingming:"",
                signmobile:"",
                chuangjianw:"立即创建",
                id:"",
                loading:false,
                form:"",
                renwu:{
                  order_status:"120",
                  sendtime:"",
                  outbound_status:"",
                  refund_status:"",
                  shop_name:[],
                  order_source:"",
                  time:"1",
                  name:"",
                  content:"",
                  sign:1,
                  is_url:false,
                  is_fahuo:false
                },
                sourcelist:"",
                qianminglist:[],
                zishu:"0",
                tiaoshu:"1",
                shoplist:"",
                duanxintiaoshu:"",
                showsign:false,
                photo:false,
                daunxinci:'',
                tuiguanglaiyuan:{
                  source:"",
                  name:""
                }
            }
        },
        created() {
          this.daunxinci = duanxinci.duanxinci();
          this.getpro();
          this.getsign();
          this.getmessagesource()
          this.getmessagenumbers()
          this.id = this.$route.query.id
          if(this.id){
            this.loading = true
            this.getrenwu()
            this.chuangjianw = '保存修改'
          }
          if(this.$route.query.status){
            this.renwu.order_status = this.$route.query.status.toString();
          }
        },
        mounted() {

        },
        methods: {
          tianjia:function(){
            var that = this
            axios.post('/api/plan-market/out-store/add',{source:this.tuiguanglaiyuan.source,name:this.tuiguanglaiyuan.name})
            	.then(response => {
            		if(response.data.msg.code == 0){
                  that.$message.success('已添加');
                  that.laiyuanshow = false
                  that.getmessagesource()
            		}else{
            			that.$message.error(response.data.msg.info);
            		}
            	})
          },
          quanxuan:function(){
            this.renwu.shop_name = this.shoplist
          },
          shang:function(){
            console.log(this.renwu.shop_name)
          },
          photochange:function(){

            if(this.renwu.is_url == true){
              this.renwu.content = this.renwu.content + '【短信地址】'
              this.zishu = parseInt(this.zishu)  + 23
              this.tiaoshu = parseInt(this.zishu/70)+1
            }else{

              this.renwu.content = this.renwu.content.replace('【短信地址】','')

              this.zishu = parseInt(this.zishu)  - 23
              this.tiaoshu = parseInt(this.zishu/70)+1
            }
          },
          photochange2:function(){

            if(this.renwu.is_fahuo == true){
              this.renwu.content = this.renwu.content + '【发货信息】'
              this.zishu = parseInt(this.zishu)  + 23
              this.tiaoshu = parseInt(this.zishu/70)+1
            }else{

              this.renwu.content = this.renwu.content.replace('【发货信息】','')

              this.zishu = parseInt(this.zishu)  - 23
              this.tiaoshu = parseInt(this.zishu/70)+1
            }
          },
          //申请签名
          addsign:function(){
            var that = this
            axios.post('/api/plan-market/message/addsign',{signname:this.signname,signxingming:this.signxingming,signmobile:this.signmobile})
            	.then(response => {
            		if(response.data.msg.code == 0){
                  that.$message.success('已申请，请等待联系');
                  that.signname = ''
                  that.signxingming = ''
                  that.signmobile = ''
                  that.showsign = false
            		}else{
            			that.$message.error(response.data.msg.info);
            		}
            	})
          },
          //测试短信
          duanxintest:function(){
            var that = this
            if(this.renwu.sign == ''){ that.$message.error('请选择签名，如果没有签名，请先申请签名'); return false }
            if(this.renwu.mobile == ''){ that.$message.error('请输入手机号'); return false }
            if(this.renwu.content == ''){ that.$message.error('请填写内容'); return false }
            axios.post('/api/plan-market/message/message_send',{mobile:this.renwu.mobile,content:this.renwu.content,sign:this.renwu.sign})
            	.then(response => {
            		if(response.data.msg.code == 0){
                  if(response.data.data == 'success'){
                      that.$message.success('测试短信已发送');
                      that.getmessagenumbers()
                  }
            		}else{
            			that.$message.error(response.data.msg.info);
            		}
            	})
          },
          //获取短信剩余条数
          getmessagenumbers:function(){
            var that = this
            axios.get('/api/plan-market/message/getmessagenumbers')
            	.then(response => {
            		if(response.data.msg.code == 0){
                  that.duanxintiaoshu = response.data.data.message_recharge
            		}else{
            			that.$message.error(response.data.msg.info);
            		}
            	})
          },
          getmessagesource:function(){
            var that = this
            axios.get("/api/plan-market/message/getmessagesource")
                .then(function(response) {
                    if (response.data.msg.code == 0) {
                        that.sourcelist = response.data.data
                    }else{
                        that.$message.error(response.data.msg.info);
                    }
                })
          },
          jishu:function(){
            this.zishu = this.renwu.content.length


            if(this.renwu.is_url == true){
              this.zishu = parseInt(this.zishu)  + 23

            }else{

            }
            this.tiaoshu = parseInt(this.zishu/70)+1

            for(var i in this.daunxinci){
              if(this.renwu.content.includes(this.daunxinci[i])){
                this.$message.error("'"+this.daunxinci[i]+"'短信不支持这个词，会导致发送失败！");
              }

            }
          },

          getrenwu:function(){
            var that = this
            axios.get("/api/plan-market/message/getrenwu?id="+this.id)
                .then(function(response) {
                    if (response.data.msg.code == 0) {
                        if(response.data.data.shop_name == 0){
                          response.data.data.shop_name = []
                        }else{

                        }
                        if(response.data.data.order_source == 0){
                          response.data.data.order_source = ''
                        }
                        if(response.data.data.outbound_status == 9999){
                          response.data.data.outbound_status = ''
                        }else{
                           response.data.data.outbound_status = response.data.data.outbound_status.toString()
                        }
                        if(response.data.data.refund_status == 9999){
                          response.data.data.refund_status = ''
                        }else{
                          response.data.data.refund_status = response.data.data.refund_status.toString()
                        }

                        if(response.data.data.content.includes('【短信地址】')){
                          response.data.data.is_url = true
                        }
                        if(response.data.data.content.includes('【发货信息】')){
                          response.data.data.is_fahuo = true
                        }

                        response.data.data.order_status = response.data.data.order_status.toString()

                        response.data.data.time = response.data.data.time.toString()
                        response.data.data.sign = parseInt(response.data.data.sign)


                        that.renwu = response.data.data
                        that.zishu = response.data.data.content.length

                        that.loading = false
                    }else{
                        that.$message.error(response.data.msg.info);
                    }
                })
          },
          //创建任务
          chuangjian:function(){
            var that = this
            // this.loading = true
            var params = {};
            if(this.renwu.name == ''){that.$message.error('请填写任务名称'); return false}
            if(this.renwu.order_source == '' && this.renwu.shop_name == ''){that.$message.error('请填写任务来源和商品至少填写一项'); return false}

            if(this.renwu.content == ''){that.$message.error('请填写发送内容'); return false}
            if(this.renwu.sendtime == 2 && this.renwu.time ==''){that.$message.error('请填写发送时间'); return false}
            if(this.renwu.sign == ''){ that.$message.error('请选择签名，如果没有签名，请先申请签名'); return false }
            if(this.renwu.id){
              params['id'] = this.renwu.id;
            }
            params['name'] = this.renwu.name;
            params['sendtime'] = this.renwu.sendtime;
            if(this.renwu.outbound_status == ''){
              this.renwu.outbound_status = 9999
            }

            if(this.renwu.refund_status == ''){
              this.renwu.refund_status = 9999
            }

            params['outbound_status'] = this.renwu.outbound_status;
            params['refund_status'] = this.renwu.refund_status;
            params['shop_name'] = this.renwu.shop_name;
            params['order_source'] = this.renwu.order_source;
            params['order_status'] = this.renwu.order_status;
            params['time'] = this.renwu.time;
            params['sign'] = this.renwu.sign;
            params['content'] = this.renwu.content;

            axios.post("/api/plan-market/message/addrenwu", params)
                    .then(function(response) {
                        if (response.data.msg.code == 0) {
                            that.$message.success('发布成功');
                            setTimeout(function(){
                              that.$router.push({
                                path:'/duanxin/renwuguanli',
                                query:{status:that.renwu.order_status}
                              })
                            },200)

                        }else{
                            that.$message.error(response.data.msg.info);
                        }
                    })
          },
          //获取商品
          getpro:function(){
            var that = this;
          	axios.get('/api/gth/order-pages?status=100&_page_size=10000')
          		.then(response => {
          			if(response.data.msg.code == 0){
          				that.shoplist = response.data.data.data
          			}else{
          				if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
          				that.$message.error(response.data.msg.info);
          			}
          		})
          },
          //获取签名
          getsign:function(){
            var that = this;
          	axios.get('/api/plan-market/message/getsign')
          		.then(response => {
          			if(response.data.msg.code == 0){
          				that.qianminglist = response.data.data
                  if(that.qianminglist == ''){
                    that.renwu.sign = ''
                  }
          			}else{
          				if(response.data.msg.code == 50401){that.$router.push({ path: "/login" }); return false}
          				that.$message.error(response.data.msg.info);
          			}
          		})
          },
        }
    }
</script>

<style lang="scss" scoped>
    .addrenwu{ margin: 0; padding: 0; background: #EFEFEF;
        .center{ width: 1366px; margin: 0 auto; display: flex; justify-content: space-between;
          .right{ flex-basis: 1166px; background: #EBECEF;
              .conlist{ padding-bottom: 20px; background: #FFFFFF; min-height: 800px;
                .addrenwutitle{ text-align: center; line-height: 50px; font-weight: bold; font-size: 16px; border-bottom: 1px #EAEAEA solid;}
                .form{ padding: 20px;
                  .el-input{ width: 300px;}
                }
                .flex{ display: flex; flex-wrap: wrap;
                  .el-select{ margin-bottom: 20px;}
                  label{ display: block; width: 100%; }
                  .el-input__icon{ height: auto !important;}
                }
                .shuru{ border: 1px #C8C9CC solid;
                  .shurutop{ background: #EAEAEA; padding-left: 20px; color:#666}
                  .el-textarea{ padding: 10px 5px;
                      textarea{border: 0; outline: 0; width: 98%;}
                  }

                }
                .red{ color:#f00; font-weight: bold; margin: 0 5px; font-size: 18px;}
                .flexm{ display: flex; justify-content: center; align-items: center;}
                .wenxin{ background: #DDDDDD; padding:10px 20px; color:#646464; line-height: 20px;}
                .wenhao{ background: #DDDDDD; color: #FFFFFF; line-height: 15px; cursor: pointer; padding: 5px 11px; margin-left: 20px; text-align: center;  border-radius: 14px;}
              }
          }
        }
    }
</style>
